<!--
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Online-Shop</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="stylesheet" type="text/css" href="css/fonts.css">
</head>
<body>
<!--顶部栏-->
<div class="topBar">
    <div class="container">
        <div class="topBar_list">
              <a href="#">小米商城</a>
              <span>|</span>
              <a href="#">MIUI</a>
              <span>|</span>
              <a href="#">IoT</a>
              <span>|</span>
              <a href="#">云服务</a>
              <span>|</span>
              <a href="#">金融</a>
              <span>|</span>
              <a href="#">有品</a>
              <span>|</span>
              <a href="#">小爱开放平台</a>
              <span>|</span>
              <a href="#">政府服务</a>
              <span>|</span>
               <a href="#">资质证照</a>
              <span>|</span>
          </div>

          <div class="shop">
              <a href="#">
                  <i class="iconfont" style="font-size: 14px">&#xe61b;</i>
                  购物车(0)
              </a>
          </div>

          <div class="login">
              <a href="#">登录</a>
              <span>|</span>
               <a href="#">注册</a>
              <span>|</span>
              <a href="#">消息</a>
          </div>
    </div>
</div>

<!--导航栏-->
<div class="header">
     <div class="container">
        <div class="site-logo">
            <a href="#">
                <img src="images/logo.png">
            </a>

        </div>
         <div class="site-list">
             <ul class="clearfix">
                 <li class="site-category">
                     <a href=""><img src="images/mifen.gif"></a>
                        <!--侧边栏-->
                      <div class="category-list">
                        <ul>
                            <li>
                                <a href="#">手机 电话卡<span class="iconfont">&#xe605;</span></a>
                            </li>
                            <li>
                                <a href="#">电视 盒子<span class="iconfont">&#xe605;</span></a>
                            </li>
                            <li>
                                <a href="#">笔记本 显示器<span class="iconfont">&#xe605;</span></a>
                            </li>
                            <li>
                                <a href="#">家电 插线板<span class="iconfont">&#xe605;</span></a>
                            </li>
                            <li>
                                <a href="#">出行 穿戴<span class="iconfont">&#xe605;</span></a>
                            </li>
                            <li>
                                <a href="#">智能 路由器<span class="iconfont">&#xe605;</span></a>
                            </li>
                            <li>
                                <a href="#">电源 配件<span class="iconfont">&#xe605;</span></a>
                            </li><li>
                                <a href="#">健康 儿童<span class="iconfont">&#xe605;</span></a>
                            </li>
                            <li>
                                <a href="#">耳机 音箱<span class="iconfont">&#xe605;</span></a>
                            </li>
                            <li>
                                <a href="#">生活 箱包<span class="iconfont">&#xe605;</span></a>
                            </li>
                        </ul>
                      </div>
                 </li>
                 <li class=""><a href="#">小米手机</a></li>
                 <li class=""><a href="#">Redmi 红米</a></li>
                 <li class=""><a href="#">电视</a></li>
                 <li class=""><a href="#">家电</a></li>
                 <li class=""><a href="#">路由器</a></li>
                 <li class=""><a href="#">智能硬件</a></li>
                 <li class=""><a href="#">服务</a></li>
                 <li class=""><a href="#">社区</a></li>
             </ul>
         </div>
         <div class="site-search">
             <form action="">
                <input type="text" name="shop" class="search-text">
                <input type="submit"  class="search-btn iconfont" value="&#xe60b;">
                <div class="search_word">
                    <a href="#">小米9</a>
                    <a href="#">小米9se</a>
                </div>
            </form>
         </div>

         </div>

</div>

<!--主页内容-->
<div class="site-content">
    <div class="container">
        <div class="site-slider">
            <a href="#">
                <img src="images/yuan.jpg">
            </a>
            <span class="next"></span>
            <span class="prev"></span>
            <!--轮播图-->
            <div class="slider-item">
             <a href="#"></a>
             <a href="#"></a>
             <a href="#"></a>
             <a href="#"></a>
             <a href="#"></a>
         </div>
        </div>
         <!--向导-->
            <div class="content-sub">
                <!--向导左-->
                <div class="content-channnel">
                    <ul class="channel-list clearfix">
                        <li>
                            <a href="#" ><i class="iconfont">&#xe641;</i>选购手机</a>
                        </li>
                         <li>
                             <a href="#"><i class="iconfont">&#xe790;</i>企业团购</a>
                         </li>
                         <li>
                             <a href="#"><i class="iconfont">&#xe603;</i>F码通道</a>
                         </li>
                         <li>
                             <a href="#"><i class="iconfont">&#xe602;</i>米粉卡</a>
                         </li>
                         <li>
                             <a href="#"><i class="iconfont">&#xe60f;</i>以旧换新</a>
                         </li>
                         <li>
                             <a href="#"><i class="iconfont">&#xe601;</i>话费充值</a>
                         </li>
                    </ul>
                </div>
               <!--向导右-->
                <div class="content-list">
                    <ul class="clearfix">
                        <li>
                            <a href="#"><img src="images/image1.jpg"></a>
                        </li>
                        <li>
                            <a href="#"><img src="images/image2.jpg"></a>
                        </li>
                       <li>
                           <a href="#"><img src="images/image3.jpg"></a>
                       </li>
                    </ul>
                </div>
            </div>
    </div>
    <!-- banner图实现-->
    <div class="content-banner">
        <div class="container">
            <a href="#">
                <img src="images/banner.jpg">
            </a>
        </div>
    </div>
</div>

<!--内容详情-->
<div class="content-desc">
    <div class="container">
        <!--标题-->
        <div class="box-hd">
            <h2>手机</h2>
            <div class="more">
                <a href="#">
                    查看全部
                    <i class="iconfont">&#xe605;</i>
                </a>
            </div>
        </div>
        <!--内容-->
        <div class="box-bd">
            <div class="row clearfix">
                <div class="row-l ">
                <a>
                    <img src="images/iphone.jpg">
                </a>
            </div>
            <div class="row-r">
                 <ul>
                      <li>
                          <!--图片 -->
                          <div class="figure">
                          <a href="#"><img src="images/figure1.jpg"></a>
                         </div>
                          <!--文本标题 -->
                         <h3 class="title">
                             <a href="#">
                                 小米9 6GB+128GB
                             </a>
                         </h3>
                          <p class="desc">晓龙855,索尼4800万超广角微距三摄</p>
                          <p class="price"><span class="num">299</span>元</p>
                          <div class="flag flag-new">新品</div>
                      </li>
                     <li>
                          <!--图片 -->
                          <div class="figure">
                          <a href="#"><img src="images/figure1.jpg"></a>
                         </div>
                          <!--文本标题 -->
                         <h3 class="title">
                             <a href="#">
                                 小米9 6GB+128GB
                             </a>
                         </h3>
                          <p class="desc">晓龙855,索尼4800万超广角微距三摄</p>
                          <p class="price"><span class="num">299</span>元</p>
                          <div class="flag flag-new">新品</div>
                      </li>
                     <li>
                          <!--图片 -->
                          <div class="figure">
                          <a href="#"><img src="images/figure1.jpg"></a>
                         </div>
                          <!--文本标题 -->
                         <h3 class="title">
                             <a href="#">
                                 小米9 6GB+128GB
                             </a>
                         </h3>
                          <p class="desc">晓龙855,索尼4800万超广角微距三摄</p>
                          <p class="price"><span class="num">299</span>元</p>
                          <div class="flag flag-new">新品</div>
                      </li>
                     <li>
                          <!--图片 -->
                          <div class="figure">
                          <a href="#"><img src="images/figure1.jpg"></a>
                         </div>
                          <!--文本标题 -->
                         <h3 class="title">
                             <a href="#">
                                 小米9 6GB+128GB
                             </a>
                         </h3>
                          <p class="desc">晓龙855,索尼4800万超广角微距三摄</p>
                          <p class="price"><span class="num">299</span>元</p>
                          <div class="flag flag-new">新品</div>
                      </li>
                     <li>
                          <!--图片 -->
                          <div class="figure">
                          <a href="#"><img src="images/figure1.jpg"></a>
                         </div>
                          <!--文本标题 -->
                         <h3 class="title">
                             <a href="#">
                                 小米9 6GB+128GB
                             </a>
                         </h3>
                          <p class="desc">晓龙855,索尼4800万超广角微距三摄</p>
                          <p class="price"><span class="num">299</span>元</p>
                          <div class="flag flag-new">新品</div>
                      </li>
                     <li>
                          <!--图片 -->
                          <div class="figure">
                          <a href="#"><img src="images/figure1.jpg"></a>
                         </div>
                          <!--文本标题 -->
                         <h3 class="title">
                             <a href="#">
                                 小米9 6GB+128GB
                             </a>
                         </h3>
                          <p class="desc">晓龙855,索尼4800万超广角微距三摄</p>
                          <p class="price"><span class="num">299</span>元</p>
                          <div class="flag flag-new">新品</div>
                      </li>
                     <li>
                          <!--图片 -->
                          <div class="figure">
                          <a href="#"><img src="images/figure1.jpg"></a>
                         </div>
                          <!--文本标题 -->
                         <h3 class="title">
                             <a href="#">
                                 小米9 6GB+128GB
                             </a>
                         </h3>
                          <p class="desc">晓龙855,索尼4800万超广角微距三摄</p>
                          <p class="price"><span class="num">299</span>元</p>
                          <div class="flag flag-new">新品</div>
                      </li>
                     <li>
                          <!--图片 -->
                          <div class="figure">
                          <a href="#"><img src="images/figure1.jpg"></a>
                         </div>
                          <!--文本标题 -->
                         <h3 class="title">
                             <a href="#">
                                 小米9 6GB+128GB
                             </a>
                         </h3>
                          <p class="desc">晓龙855,索尼4800万超广角微距三摄</p>
                          <p class="price"><span class="num">299</span>元</p>
                          <div class="flag flag-new">新品</div>
                      </li>

                 </ul>
            </div>
            </div>

        </div>
    </div>
</div>

<!--脚部-->
<div class="footer">
    <div class="container">
        <div class="footer-service">
            <ul class="clearfix">
                <li class="first">
                    <a href="#">
                        <i class="iconfont">&#xe629;</i>预约维修
                    </a>
                </li>
                 <li>
                    <a href="#">
                        <i class="iconfont">&#xe600;</i>七天无理由
                    </a>
                </li>
                 <li>
                    <a href="#">
                        <i class="iconfont">&#xe638;</i>15天免费换货
                    </a>
                </li>
                 <li>
                    <a href="#">
                        <i class="iconfont">&#xe790;</i>满99元包邮
                    </a>
                </li>
                 <li>
                    <a href="#">
                        <i class="iconfont">&#xe768;</i>520余家售后网点
                    </a>
                </li>
            </ul>

        </div>
        <div class="footer-links clearfix">
            <dl class="col-links">
                <dt>帮助中心</dt>
                <dd>账户管理</dd>
                <dd>购物指南</dd>
                <dd>订单操作</dd>
            </dl>
            <dl class="col-links">
                <dt>服务支持</dt>
                <dd>售后政策</dd>
                <dd>自助服务</dd>
                <dd>相关下载</dd>
            </dl>
            <dl class="col-links">
                <dt>线下门店</dt>
                <dd>小米之家</dd>
                <dd>服务网点</dd>
                <dd>授权体验店</dd>
            </dl>
            <dl class="col-links">
                <dt>关于小米</dt>
                <dd>了解小米</dd>
                <dd>加入小米</dd>
                <dd>投资者关系</dd>
            </dl>
            <dl class="col-links">
                <dt>关注我们</dt>
                <dd>浪微博</dd>
                <dd>官方微信</dd>
                <dd>联系我们</dd>
            </dl>
            <dl class="col-links">
                <dt>特色服务</dt>
                <dd>F 码通道</dd>
                <dd>礼物码</dd>
                <dd>防伪查询</dd>
            </dl>
            <div class="col-contact">
                <p class="iphone">400-100-5678</p>
                <p>周一至周日8:00-18:00<br>(仅收市话费)</p>
                <a href="#"><i class="iconfont">&#xe641;</i>联系客服</a>
            </div>
        </div>
    </div>
</div>

<!--侧方栏-->
<div class="site-bar">
    <ul>
        <li class="site-bar-first">
            <a href="#">
                <img src="images/1.png">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/2.png">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/3.png">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/4.png">
            </a>
        </li>

    </ul>

</div>
</body>
</html>